<template>
  <div class="app-container wwwx">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="所属公司" >
        <treeselect style="width: 199px;height: 32px" v-model="queryParams.deptId" :options="company"
                    placeholder="请选择所属公司"/>
      </el-form-item>
      <el-form-item label="申请单号" >
        <el-input
          v-model="queryParams.oddNumbers"
          placeholder="请输入申请单号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="设备编号" >
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入设备编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态" >
        <el-select
          v-model="queryParams.examineAndApprove"
          placeholder="审核状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="是否验收" >
        <el-select
          v-model="queryParams.acceptanceCheckState"
          placeholder="审核状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in yanshouArr"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="支付状态" >
        <el-select
          v-model="queryParams.paymentState"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in [{name:'未支付',id:0},{name:'已支付',id:1}]"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>

      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="checked" >我审核的</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryParams.pageNum=1;getList();">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="cgjhadd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="roleList" stripe border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="申请单号" property="oddNumbers" width="150" >
        <template slot-scope="scope" style="text-align: center">
          <span style="color: #2196F3;cursor: pointer" @click="xingqing(scope.row)">{{scope.row.oddNumbers}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号"   property="deviceCode" width="150">
        <template slot-scope="scope">
          <div class="bule" @click="deviceDetails(scope.row)">{{scope.row.deviceCode}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="外委单位" property="delegateUnit" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="申请时间"  property="applyForTime" width="170"></el-table-column>
      <el-table-column align="center" label="申请人" property="userName" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="当前节点"  property="beizhu" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="审核状态"  property="examineAndApprove" :show-overflow-tooltip="true" width="150" >
        <template slot-scope="scope" style="text-align: center">
          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.examineAndApprove=='1'" >未提交</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.examineAndApprove=='2'">进行中</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.examineAndApprove=='3'">已结束</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.examineAndApprove=='3'">已打回</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核结束时间" property="endTime"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="是否验收" property="acceptanceCheckState"  :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <span v-show="scope.row.acceptanceCheckState==0">未验收</span>
          <span v-show="scope.row.acceptanceCheckState==1">已验收</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付状态" property="paymentState" width="220">
        <template slot-scope="scope">
          <el-switch :disabled="!scope.row.acceptanceCheckState==1" v-model="scope.row.paymentState" active-text="已支付" inactive-text="未支付" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="(val)=>{updataPayment(scope.row,val)}"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            v-show="queryParams.state==2&&scope.row.submitState==1"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            v-show="queryParams.state==2&&scope.row.submitState==1 "
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button 
              v-show="scope.row.verifyIsPass==1&&scope.row.verifyStatus==1&&scope.row.acceptanceCheckState==0"
            size="mini" type="primary" class="btnCyan" icon="el-icon-plus" @click="checkAccept(scope.row)">验收</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 我的验收 -->
    <el-dialog
      title="验收"
      :visible.sync="checkAcceptVisible"
      :close-on-click-modal="false"
      width="50%" class="checkAccept">
      <div style="max-width:600px;margin:auto;">
      <!-- <el-radio-group v-model="checkAcceptForm.verifyTheStatus">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">不通过</el-radio>
      </el-radio-group> -->
      <!-- <div class="grade" v-if="checkAcceptForm.verifyTheStatus==1">
        <span class="h4">评分</span>
        <i :class="checkAcceptForm.score<1?'el-icon-star-off':'el-icon-star-on'" @click="grade(1)"></i>
        <i :class="checkAcceptForm.score<2?'el-icon-star-off':'el-icon-star-on'" @click="grade(2)"></i>
        <i :class="checkAcceptForm.score<3?'el-icon-star-off':'el-icon-star-on'" @click="grade(3)"></i>
        <i :class="checkAcceptForm.score<4?'el-icon-star-off':'el-icon-star-on'" @click="grade(4)"></i>
        <i :class="checkAcceptForm.score<5?'el-icon-star-off':'el-icon-star-on'" @click="grade(5)"></i>
      </div> -->
      <div class="explain">
        <span class="h4">总费用</span>
        <el-input type="tel" v-model.number="checkAcceptForm.totalCosts"> </el-input>
      </div>
      <div class="explain">
        <span class="h4">说明</span>
        <el-input type="textarea" v-model="checkAcceptForm.maintenanceContent"> </el-input>
      </div>
      <div class="image">
        <span class="h4">设备文件</span>
        <el-upload
          :action="baseUrl()+'/common/upload'"
          :on-success="fileSuccess"
          :show-file-list="false"
          >
          <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
        </el-upload>
        <div class="unloadBox" v-if="checkAcceptForm.dqmadList">
          <div class="file" v-for="(item,index) in checkAcceptForm.dqmadList">
            <span class="index">{{index+1}}、</span>
            <span class="">{{item.accessoryName}}</span>
            <i class="el-icon-delete" @click="fileDel(index,item.accessoryUrl)"></i>
          </div>
          
        </div>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="checkAcceptVisible=false">取消</el-button>
          <el-button size="mini" type="primary" @click="checkAcceptSumbit">确定</el-button>
        </span>
    </el-dialog>
<equipment-des v-if="isDes" @subSetChane="subSetChane" :pid="pid"></equipment-des>
<wwwx-add v-if="isAdd" @subSetChane="addSetChane" :pid="aid"></wwwx-add>
<wwwx-des v-if="isDest" @subSetChane="desSetChane" :pid="wid"></wwwx-des>
  </div>
</template>

<script>
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {repairList,repairDel,wwwxForRepairSure,wwwxUpdataPayment} from '@/api/repair/index'
  import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import equipmentDes from '@/views/components/equipmentDetails'
  import wwwxAdd from './editSQD'
  import wwwxDes from './sqdXQ'

  export default {
    name: "Role",
    components: {
      Treeselect,
      equipmentDes,
      wwwxAdd,
      wwwxDes
    },
    data() {
      return {
        company:[],
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [],
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [
          { value: '2',label: '进行中'},
          { value: '3',label: '已结束'},
          { value: '1',label: '未提交'},
        ],
        //是否验收
        yanshouArr:[
          { value: '1',label: '是'},
          { value: '0',label: '否'},
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          state:1
        },
        checked:false,
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },

        isDes: false,
        pid: null,
        isAdd:false,
        aid:null,
        isDest:false,
        wid:null,
        checkAcceptVisible:false,
        checkAcceptForm:{
          // score:0,
          // verifyTheStatus:1,
          dqmadList:[],
          totalCosts:0
        },
      };
    },
    watch:{
      checkAcceptVisible(){
        if(!this.checkAcceptVisible){
          this.checkAcceptForm = {
              // verifyTheStatus: 1,
              // score: 0,
              dqmadList:[],
              totalCosts:0
            }
        }
      }
    },
    created() {
      this.getTree()
      this.getList()
    },
    methods: {
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true;
        this.queryParams.state=this.checked?2:1
        repairList(this.queryParams).then(
          res => {
            this.roleList = res.rows
            this.total = res.total
            this.loading = false
          }
        );
      },
      //更改时间
      dateChange() {
        this.queryParams.applyForTimeStart = this.dateRange&&this.dateRange[0]||null
        this.queryParams.applyForTimeEnd = this.dateRange&&this.dateRange[1]||null
      },
      //表格编辑
      handleEdit:function (index,row) {
        
        // this.$router.push({path:'/maintain/editSQD',query:{id:row.id}})
        this.aid=row.id
        this.isAdd=true
      },
      //删除
      handleDelete:function (index,row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // repairDel(row.id).then((res)=>{
          //   if(res.code==200){
          //     this.$message.success(res.msg)
          //     this.getList()
          //   }
          // })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //采购计划
      cgjhadd:function () {
        console.log('tianjia')
        // this.$router.push({path:'/maintain/editSQD',query:{userid:'55555'}});
        this.isAdd=true
      },
      addSetChane(info){
        this.isAdd=false
        this.aid=null
        if(info) this.getList()
      },
      //详情点击
      xingqing:function (row) {
        // this.$router.push({path:'/maintain/sqdXQ',query:{id:row.id}});
        this.wid=row.id
        this.isDest=true
      },
      desSetChane(){
        this.isDest=false
        this.wid=null
      },
      //设备编号详情
      deviceDetails(row) {
        // this.$router.push({ path: '/equipmentGL/equipmentDetails', query: { data: row.devicesId } })
        // this.$router.push({path: '/maintain/repairWorkOrderDetailD', query: {data: row,name:'myCheckAccept',}})
        this.pid=row.deviceId
        this.isDes=true
      },
      subSetChane(){
        this.isDes=false
        this.pid=null
      },
      //验收
      checkAccept(row){
        this.checkAcceptForm.id=row.id
        this.checkAcceptVisible=true
      },
      fileSuccess(res) {
        //文件上传成功
        this.checkAcceptForm.dqmadList.push({ accessoryName: res.fileName, accessoryUrl: res.filePath,state:2})
      },
      async fileDel(index, filePath){
          //删除文件
        await fileDelete(filePath)
        this.checkAcceptForm.dqmadList.splice(index, 1)
      },
      checkAcceptSumbit(){
        // this.checkAcceptForm
        // debugger
        // return false
        wwwxForRepairSure(this.checkAcceptForm).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            this.checkAcceptVisible=false
            this.getList()
          }
        })
      },
      updataPayment(row,val){
        //更新支付状态
// debugger
// return false
        wwwxUpdataPayment({id:row.id,paymentState:val}).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
          }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
.wwwx{
  .bule {
    color: #2196F3;
    cursor: pointer;
  }
  .unloadBox {
      width: 100%;
      border: 1px solid #cccccc;
      margin-top: 20px;
      min-height: 50px;
      overflow: hidden;

      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }
      .file {
          width: 100%;
          border-top: 1px #cccccc dotted;
          line-height: 50px;

          .index {
            padding: 0 10px;
            color: #666
          }

          i {
            float: right;
            line-height: 50px;
            padding-right: 10px;
            font-size: 20px;
            cursor: pointer;
          }

        }
    }
    .checkAccept >>> .el-dialog__body{
      height: 65vh;
      overflow: scroll;
      padding: 50px 0;
    }
  .checkAccept {
      .is-checked {
        .el-radio__label, .el-checkbox__label {
          color: #05A380;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner {
          background-color: #05A380;
          border-color: #05A380;
        }
      }
      .grade {
        margin: 15px 0 0;
        i {
          font-size: 20px;
        }
      }
      .explain {
        margin-top: 15px;
        .el-textarea {
          margin: 10px 0;
        }
      }
      .image{
        margin-top:10px;
        .h4{
          display: inline-block;
          margin-bottom: 10px;
        }
      }
      .h4 {
        line-height: 20px;
        color: #05A380;
        font-weight: bold;
        font-size: 16px;
        padding-right: 10px;
      }

    }
}
</style>
